<!-- 设置安全码 -->
<template>
  <div id="SetSecurityCode">
    <Head BackType1="1" title="设置安全码" v-on:SuccessClick="SuccessClick" v-show="hastext" NoticeType3="1"></Head>
    <Head BackType1="1" title="设置安全码" v-on:SuccessClick="SuccessClick" v-show="!hastext" NoticeType7="1"></Head>
    <div id="SetSecurityCodeMain">
      <van-cell-group class="SetSecurityCodeBox">
        <van-field :disabled="!hidden" :type="!hidden?'password':'text'" class="SetSecurityCodeposhow" v-model="value" clearable placeholder="请输入安全码" />
      </van-cell-group>
      <div class="SetSecurityCodeTip" v-show="hidden">
        <span class="colf30">*</span>安全码为6--8位的字母数字，用于找回密码，不可更改请谨慎填写！
      </div>
      <div class="SetSecurityCodeTip" v-show="!hidden">
        <span class="colf30">*</span>安全码已设置，且不可更改，如有问题请致电客服400-123456
      </div>
    </div>
  </div>
</template>

<script>
  import Head from '../components/Head'
  import { Field, CellGroup, Dialog } from 'vant';
  export default {
    data(){
      return{
        hidden:true,
        value:'',
        hastext:false,
      }
    },
    components:{
      Head,
      [Field.name]:Field,
      [CellGroup.name]:CellGroup,
      [Dialog.name]:Dialog,
    },
    mounted(){
      var that = this;
      /**
      * 获取个人信息
      * isSafe:是否设置安全码 1 已设置 0 没有
      */
      this.$get(urlConfig.memberInfo)
      .then(res => {
        if(res.data ==''){
        }else{
          if(res.data.isSafe == 0){
            this.hidden = true;
          }else{
            this.hidden = false;
            this.hastext = false,
            this.value = '******';
          }
        }
      })
    },
    watch:{
      value(){
      console.log(this.value)
        if(this.value !=''&&this.hidden == true){
            this.hastext = true;
        }else{
          this.hastext = false;
        }
      }
        
    },
    methods:{
      SuccessClick(){
        console.log(this.value)
        if(this.value.length>8||this.value.length<6){
          Dialog.alert({
            title: '提示',
            message: '安全码为6--8位的字母数字'
          }).then(() => {
            // on close
          });
        }else{
          Dialog.confirm({
            title: '提示',
            message: '安全码用于找回密码，不可更改请谨慎填写！'
          }).then(() => {
            /**
            * 安全码设置
            */
            var settext={
                accesskey:this.value,
            }
            this.$post(urlConfig.setAccesskey,settext)
              .then(res => {
              console.log(res);
              this.$router.push('/Security')
            })
          }).catch(() => {
            console.log(2)
          })
        }
      }
    },
    // watch:{
    //   value(){
    //     console.log(this.value)
    //   }
    // }
  }
</script>

<style scoped lang="less">
  #SetSecurityCode{
    #SetSecurityCodeMain{
      position: fixed;
      top: 98px;
      left: 0;
      .SetSecurityCodeBox{
        
        .SetSecurityCodeposhow{
          height: 88px;
          display: flex;
          align-items: center;
          .van-cell{
            font-size: 32px;
            height: 32px;
            font-family:PingFangSC-Regular;
            &::-webkit-input-placeholder {
                color:#D6D7DC !important;
            }

            &:-ms-input-placeholder {
                color:#D6D7DC !important;
            }
          }
        }
      }
      .SetSecurityCodeTip{
        margin-top: 10px;
        width: 670px;
        padding: 0 40px;
        color: #999;
        font-size: 22px;
        line-height: 40px;
        .colf30{
          color: #f61212;
          margin-right: 5px;
        }
      }
    }
  }
</style>